<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <audio src="" id="audio" controls></audio>
        <div><button class="recorderControl" type="button">录制</button></div>
    </div>
    <script src="./vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        console.log("navigator.getUserMedia", navigator.getUserMedia)
        console.log("navigator.webkitGetUserMedia", navigator.webkitGetUserMedia)
        var promise = navigator.mediaDevices.getUserMedia({
            audio: true
        });
        promise.then(function (stream) {
            var audio = document.querySelector("audio")
            audio.src = URL.createObjectURL(stream);
            var recorder = new MediaRecorder(stream);

            var recorderControl = document.querySelector(".recorderControl");
            recorderControl.onclick = function () {
                this.textContent === "录制" ? audio.play() : audio.pause();
                this.textContent === "录制" ? recorder.start() : recorder.stop();
                this.textContent = this.textContent === "录制" ? "停止" : "录制";
            }
            recorder.ondataavailable = function () {
                //收集媒体设备 获得到的 可以使用的 媒体流数据
                console.log(event.data)
            }
        });


        //获得到有效数据的时候调用
        promise.catch(function (error) {
            console.log(error)
        });
    </script>
</body>

</html>